<template>
  <div class="playlist-all">
    <div class="header" ref="header">
      <div class="title">
        今天从《{{tracks?tracks[0].name:"Tukoh Taka (Official FFF Anthem)"}}》听起|私人雷达
      </div>
      <div class="daysUpdate">每日更新</div>
      <div class="description">
        <div>你爱的歌，值得反复聆听</div>
        <div>私人雷达，每日更新，收藏你的最爱</div>
      </div>
    </div>
    <div class="show-all" v-if="isGotList">
      <div class="playlist">
        <div class="title">歌曲列表</div>
        <div class="playlist-show">
          <ListComponent @addToListenList="$emit('addToListenList',tracks)" :songId="songId" v-for="(listItem,index) in tracks" :key="listItem.id" :listItem="listItem" :index="index+1"/>
        </div>
      </div>
      <div class="comments" v-if="comments">
        <div class="title">精彩评论</div>
        <div>
          <CommentComponent v-for="commentItem in comments" :key="commentItem.commentId" :commentItem="commentItem"/>
        </div>
      </div>
    </div>
    <WaitLoad v-else/>
  </div>
</template>

<script>
  import ListComponent from "@/components/ListComponent.vue";
  import CommentComponent from "@/components/CommentComponent.vue";
  import WaitLoad from "@/components/WaitLoad.vue";
  export default {
    name:"PlaylistView",
    components:{
      ListComponent,
      CommentComponent,
      WaitLoad
    },
    data(){
      return {
        playlist:null,
        id:-1,
        tracks:null,
        comments:null,
        isGotList:false
      }
    },
    props:{
      songId:{
        type:Number,
        default:0
      }
    },
    watch:{
      id:{
        handler(val){
          this.getPlayList(val);
        }
      }
    },
    methods:{
      async getPlayList(id){
        let result = await this.axios.get("/playlist/detail?id="+id);
        if(result.status==200){
          let {playlist} = result.data;
          this.playlist = playlist;
          this.tracks = this.playlist.tracks;
          this.$refs.header.style.backgroundImage = `url(${this.playlist.coverImgUrl}?param=170y170)`
        }
        this.isGotList = true;
        let data = await this.axios.get(`/comment/hot?id=3136952023&type=2`);
        if(data.status==200){
          let {hotComments} = data.data;
          this.comments = hotComments;
        }
      }
    },
    created(){
      this.id = this.$route.query.id;
    }
  }
</script>

<style lang="scss" scoped>
.playlist-all{
  position: relative;
  width: 100%;
  left: 0;
  top: 0;
  color: #fff;
  .header{
    position: relative;
    width: 100%;
    height: 2.1rem;
    background-image: url(https://p1.music.126.net/jA_iTzrNEa6Dg2qoH2lx_A==/109951168069840116.jpg?param=170y170);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50%;
    box-sizing: border-box;
    padding: 0.4rem 0.2rem 0 0.2rem;
    .title{
      position: relative;
      font-size: 0.18rem;
      line-height: 0.26rem;
      z-index: 10;
    }
    .daysUpdate{
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 0.02rem;
      width: 0.54rem;
      font-size: 0.12rem;
      margin-top: 0.1rem;
      background-color: rgba($color: #ccc, $alpha: 0.2);
      padding: 0.02rem;
    }
    .description{
      font-size: 0.14rem;
      margin-top: 0.2rem;
      line-height: 0.2rem;
    }
    &::after{
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba($color: #000000, $alpha: 0.2);
    }
  }
  .show-all{
    .title{
      width: 100%;
      height: 0.23rem;
      font-size: 0.12rem;
      color: #666;
      box-sizing: border-box;
      padding: 0 0.1rem;
      display: flex;
      align-items: center;
      background-color: rgba($color: #000000, $alpha: 0.05);
    }
    .playlist{
      width: 100%;
    }
  }
}
</style>